@import "../../../styles/variable.scss";
.comp-try-api {
  position: relative;
  padding: 16px;
  height: 100%;

  .ant-btn {
    margin-left: 8px;
    padding: 0px;
    background-color: $primary-bg-color !important;
    border: 1px #f8f9fa solid;
  }
  .ant-btn:hover {
    background-color: $code-bg !important;
    border: 1px $hover-border solid !important;
    color: $hover-text-color !important;
  }

  .ant-alert {
    margin-bottom: 16px;
    font-size: 12px;
    background-color: #fff4dd;
    border: none !important;
    .ant-alert-content {
      .smart-debugger-wrapper {
        display: inline-block;
      }
    }
  }
  .ant-alert-error {
    background-color: #fff5f5;
  }

  .ant-spin-nested-loading {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: center;
    background: $primary-bg-color;
    opacity: 0.5;
  }

  .api-result {
    width: 100%;
    min-height: 300px;

    .api-res-header {
      .title {
        margin-bottom: 16px;
        color: $primary-font-color;
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 500;
        text-align: left;
      }
      .res-info {
        margin: 0 0 16px 0;
        & > .item {
          display: inline-block;
          margin-right: 24px;
          vertical-align: middle;
          margin: 0 4px;
          .debug-res {
            display: flex;
          }
          .label {
            font-family: PingFangSC;
            font-weight: 400;
            font-size: 12px;
            color: $primary-font-color;
            opacity: 0.7;
            margin-right: 4px;
            .icon-success {
              color: #00a700;
            }
            .icon-error {
              color: #c80000;
            }
            .icon-forbidden {
              color: #696969;
            }
          }
          .value {
            font-family: PingFangSC;
            font-weight: 500;
            font-size: 12px;
            color: $primary-font-color;
          }
          .result-status {
            padding: 0 8px;
            border-radius: 2px;
          }
          .success {
            color: #00a700;
          }
          .error-red {
            color: #c80000;
          }
        }
      }
    }
  }

  .ant-empty {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
